<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>教师节快乐！祝您每天开心~</title>

<link rel="stylesheet" href="css/style.css">

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="js/PerfectLoad.js"></script>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<style>
*{margin:0; padding:0; border:0;}
*:focus{outline:none;}
html{ overflow-x:hidden;}
body {margin:0; padding:0; border:0;} 
.demo img{width:100%}
</style>
<script type="text/javascript">
function MM_effectShake(targetElement)
{
	Spry.Effect.DoShake(targetElement);
}
var bgaudiocount = 0;
        function bgaudio(){       
            ++bgaudiocount;
            if(bgaudiocount % 2 == 1){   
                document.getElementById("bgaudio").play();      
            }else{
                document.getElementById("bgaudio").pause();
            }
          
        }
</script>
</head>
<body onclick="bgaudio()">
	

<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<center><img src="images/马.png" width="400px" height="400px" style="margin-left: -20%; margin-top: 45%; float: initial; position: fixed;" onclick="MM_effectShake(this)"> 
</center>
<div class="mobile">最大化查看</div>
<div class="pyro">
<div class="before"></div>
<div class="after"></div>
</div>
<h1>Happy everday!</h1>

<h2>教师节快乐！</h2>
<br><br>
<span> 🎉 </span>
<audio src="yin.mp3" id="bgaudio"></audio>
<canvas  id="c" style="width: 100%; height: 100%; z-index: 9999; margin-top: -120px;" onclick="clieckBtn() play2()"></canvas>
    <script>
        window.onload = function (argument) {

            // var lyric = "i couldn't take it couldn't stand another minute couldn't bear another day without you in it";
            var lyric = "节日快乐 节日快乐 节日快乐 节日快乐 节日快乐 节日快乐 节日快乐 节日快乐  大方 大方  美丽 美丽  心想事成 心想事成 心想事成 心想事成 心想事成 开心 开心 开心 开心 fun fun 人缘超好 人缘超好 人缘超好 fun fun fun fun  happy happy happy  beautiful beautiful 梦想成真 梦想成真 梦想成真 梦想成真 梦想成真 梦想成真 梦想成真 梦想成真 大方 大方 热爱生活 热爱生活 聪明伶俐 聪明伶俐 18岁 18岁  桃李满门  桃李满门 春风化雨 春风化雨  春风化雨  春风化雨  人见人爱 人见人爱 人见人爱 春风化雨 春风化雨 春风化雨 甜甜的女孩 甜甜的女孩 甜甜的女孩 节日快乐 节日快乐 节日快乐 节日快乐 节日快乐 节日快乐 节日快乐 节日快乐  大方 大方  美丽 美丽  桃李满天下 桃李满天下 桃李满天下 桃李满天下 桃李满天下 桃李满天下 桃李满天下 桃李满天下 桃李满天下 桃李满天下  fun fun fun fun fun fun  happy happy happy  beautiful beautiful 天天开心 天天开心 天天开心 18岁 18岁  哈哈哈哈哈哈 哈哈哈哈哈哈 哈哈哈哈哈哈 哈哈哈哈哈哈 甜甜的女孩 超爱笑 超爱笑"
            
			var words = {};
            var words_attr = [];
            string_handle(lyric);

            var canvas = document.getElementById('c');
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

            if (canvas.getContext) {
                var c = canvas.getContext('2d'),
                w = canvas.width,
                h = canvas.height;

                c.strokeStyle = 'red';
                c.fillStyle = 'white';
                c.lineWidth = 5;

                // constructor
                Word = function (key) {
                    this.text = key;
                    this.x = Math.random() * w;
                    this.y = Math.random() * h;
                    this.font = words[key] * 10 + 'px arial';
                    this.speed = words[key];
                };
                for (key in words) {
                    words_attr.push(new Word(key));
                }
                console.log(words_attr.length);

                function animation() {
                    for (var i = 0; i < words_attr.length; i++) {
                        c.font = words_attr[i].font;
                        c.fillText(words_attr[i].text, words_attr[i].x, words_attr[i].y);
                        words_attr[i].width = c.measureText(words_attr[i].text).width;
                        c.stroke();
                    }
                    move();
                }

                function move() {
                    for (var i = 0; i < words_attr.length; i++) {
                        if (words_attr[i].x > w) {
                            words_attr[i].x = -words_attr[i].width;
                            words_attr[i].y = Math.random() * h;
                        } else {
                            words_attr[i].x += words_attr[i].speed;
                        }
                    }
                }

                setInterval(function () {
                    c.clearRect(0, 0, w, h);
                    animation();
                }, 24);

            }

            function string_handle(str) {
                var split_str = str.split(" ");
                var word_array = [];
                var word_count = [];
                for (var i = 0; i < split_str.length; i++) {
                    check = true;
                    for (var j = 0; j <= word_array.length; j++) {
                        if (split_str[i] == word_array[j]) {
                            word_count[j]++;
                            check = false;
                            break;
                        }
                    }
                    if (check) {
                        word_array.push(split_str[i]);
                        word_count.push(1);
                    }
                }
                for (var i = 0; i < word_array.length; i++) {
                    words[word_array[i]] = word_count[i];
                }
                return words;
            }

        };
    </script>


</body>
</html>